<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width:800px;
                height:600px;
                position: relative;
                margin: 100px auto;
                background:#000000;
                border:2px solid red;
                overflow: hidden;
            }
            .ball{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
            }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="../js/utils.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    // OOA：
    // 1.绑定事件元素
    // 2.事件触发函数：
    //       1.创建烟花主体
    //       2.烟花主体运动到鼠标点击位置
    //       3.运动到鼠标点击位置时，烟花主体消失，创建一大堆子烟花
    //       4.子烟花按照三角函数运动


    // OOD:
    function Firework(){
        this.box = document.querySelector("#box");
        this.runFire();
        this.autoPlay()

    }
      // 烟花主体运动到鼠标点击位置
      Firework.prototype.runFire = function(){
          var self = this;
        this.box.onclick = (e)=>{
            var e = e || window.event;
            var firework = this.createFire();
            firework.style.left = e.offsetX + "px";
            $(firework).animate({
                top:e.offsetY
            },500,function(){
                firework.remove()
                self.boom(e.offsetX,e.offsetY);
            })
        }
        
    }
    // 创建烟花主体
    Firework.prototype.createFire = function(){
            var div = document.createElement("div");
            div.className = "ball";
            div.style.background = "#" + Math.round(parseInt("ffffff", 16) * Math.random()).toString(16).padStart( 6 , "0")
            this.box.appendChild(div);
            return div;    
    }
  
    // 烟花主体消失，创建一堆子元素
    Firework.prototype.boom = function(x,y){
        this.num = randomNum(10,16);
        this.r  = randomNum(50,100);
        var deg = 0;
        var self = this;
        for(var i = 0 ; i<this.num;i++){
            var smallFirework = this.createFire();
            smallFirework.style.left = x + "px";
            smallFirework.style.top = y + "px";     
            deg +=  Math.round(360 / this.num) ;
            $(smallFirework).animate({
                left : Math.round(Math.cos(Math.PI/180*deg)*self.r)+x,
                top : Math.round(Math.sin(Math.PI/180*deg)*self.r)+y
            },function(){
                this.remove()
            })
        }
    }
    // 烟花自动播放
    Firework.prototype.autoPlay = function(){
        var self = this;
        setInterval(function(){
            self.box.onclick({
                offsetX: Math.round(Math.random()*self.box.offsetWidth)+100,
                offsetY: Math.round(Math.random()*self.box.offsetHeight)+100
            })
        },200)
    }
    
    var res = new Firework()
</script>
</html>